<template>
  <div class="specs_manager">
    <el-main class="base_main_content">
      <div class="base_screen_header">
        <div class="btn-box">
          <el-button @click="add" type="primary">
            新增{{ config.name }}
          </el-button>
          <el-button
            v-if="config.extraButton === 'foreEndFilter'"
            @click="filterStatusChange"
            type="primary"
            >
            {{ `${filterStatusVal}前端筛选` }}
          </el-button>
        </div>
      </div>
      <DataCollectTable
        :data="data"
        :total="total"
        :config="tableConfig"
        @operationsHander="opHander.receive"
      >
      </DataCollectTable>
    </el-main>
  </div>
</template>

<script setup>
import { $msg, $box } from "@ui/msg";
import DataCollectTable from "@com/table/DataCollectTable.vue";
import {
  OP_KEY,
  OPERATIONS,
  operationsHander,
} from "@com/table/tableOperations";
import { ref, defineProps, defineEmits } from "vue";
// import specsData from "@/test/specsData.json";
import api from "@api/singleField";
import useRoute from "@util/router";

const props = defineProps({
  config: {
    type: Object,
    default: () => {
      return { name: "", type: "", route: "", extraButton: "" };
    },
  },
  customAdd: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["add", "show", "modify"]);
const data = ref([]);
const total = ref(0);
const route = useRoute();

function goodsOperations(data) {
  if (props.customAdd) {
    return [OPERATIONS.check, OPERATIONS.modify, OPERATIONS.del];
  } else {
    return [OPERATIONS.modify, OPERATIONS.del];
  }
}

init();
function init() {
  if (props.config.extraButton === "foreEndFilter") {
    getFilterStatus();
  }
}

route.watchRouter(props.config.route, () => {
  getData();
});

const tableConfig = {
  showIndex: true,
  operations: {
    label: "操作",
    width: 140,
    operations: goodsOperations,
  },
  column: [
    {
      label: props.config.name + "名称",
      prop: "name",
    },
  ],
};
getData();
function getData() {
  let routeQuery = route.query();
  api.list(
    props.config.type,
    {
      page: routeQuery.p,
      size: routeQuery.s,
    },
    (val) => {
      data.value = val.itemList;
      total.value = val.total;
    }
  );
}

function add() {
  if (props.customAdd) {
    emit("add");
  } else {
    $box.input("新增", props.config.name + "名称", null, (val) => {
      api.add(props.config.type, val, () => {
        getData();
        $msg.succ("新增成功");
      });
    });
  }
}

const opHander = operationsHander();
opHander.install(OP_KEY.modify, (data) => {
  if (props.customAdd) {
    emit("modify", data);
  } else {
    $box.input("修改", props.config.name + "名称", data.name, (val) => {
      api.updata(props.config.type, data.id, val, () => {
        getData();
        $msg.succ("修改成功");
      });
    });
  }
});
opHander.install(OP_KEY.delete, (data) => {
  $box.open("删除确认", `是否删除${data.name}`, () => {
    api.del(props.config.type, data.id, () => {
      getData();
      $msg.succ("删除成功");
    });
  });
});
opHander.install(OP_KEY.check, (data) => {
  emit("show", data);
});

var filterStatus = 0;
const filterStatusVal = ref("开启");

function filterStatusChange() {
  api.updForeEndFilter(props.config.type, filterStatus, () => {
    getFilterStatus();
  });
}

function getFilterStatus() {
  // 当前状态 0 不启用， 1 启用 ，按钮显示反方文案
  api.statusForeEndFilter(props.config.type, (val) => {
    filterStatus = val.isStart;
    if (val.isStart === 1) {
      filterStatusVal.value = "关闭";
    } else {
      filterStatusVal.value = "启用";
    }
  });
}
</script>

<style lang="scss">
.specs_manager {
  .btn-box {
    .el-button {
      &:first-child {
        margin-right: 10px;
      }
    }
  }
}
</style>
